<template>
    <div>
        <head></head>
        <el-form :model="form">
            <el-form-item label="选择地区" required>
                <el-col :span="5">
                    <el-form-item label="省" :label-width="formLabelWidth">
                        <el-input v-model="form.addressProvince" autocomplete="off"></el-input>
                    </el-form-item>
                    </el-col>
                <el-col class="line" :span="1">-</el-col>
                <el-col :span="5">
                <el-form-item label="市" :label-width="formLabelWidth">
                     <el-input v-model="form.addressCity" autocomplete="off"></el-input>
                </el-form-item>
                </el-col>
                <el-col class="line" :span="1">-</el-col>
                <el-col :span="5">
                    <el-form-item label="区" :label-width="formLabelWidth">
                        <el-input v-model="form.addressDistrict" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="1">-</el-col>
                <el-col :span="8">
                    <el-form-item label="街道" :label-width="formLabelWidth">
                        <el-input v-model="form.addressStreet" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="具体地址" :label-width="formLabelWidth">
                <el-input v-model="form.addressDetail" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="收货人" :label-width="formLabelWidth">
                <el-input v-model="form.addressConsignee" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="收货人电话" :label-width="formLabelWidth">
                <el-input v-model="form.addressPhone" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close()">取 消</el-button>
            <el-button type="primary" @click="add(form)">确 定</el-button>
        </div>
    </div>
</template>

<script>
    import {addAddress} from "../../service/address";
    import {mapState} from "vuex";
    import Head from "../cart/head";

    export default {
        // eslint-disable-next-line vue/no-unused-components
        components: {Head},
        computed: {
            ...mapState("user", ["user"])
        },
        data() {
            return {
                form: {
                    addressConsignee: '',
                    addressPhone: '',
                    addressProvince: '',
                    addressCity: '',
                    addressDistrict: '',
                    addressStreet: '',
                    addressDetail: '',
                    userId:1
                },
                formLabelWidth: '120px'
            };
        },
        methods:{
            async add(){
                    // this.from.userId = this.user.userId;
                    await addAddress(this.from);
                    this.$message({
                        type: 'success',
                        message: '添加成功!',
                    });
                    this.$router.push("/address");
            },
            close(){
                this.$router.push("/address");
            }
        }
    };
</script>

<style scoped>

</style>